<?php

use yii\helpers\Html;
use \backend\assets\AppAsset;

/* @var $this yii\web\View */
/* @var $content string 字符串 */
$controller = $this->context->id;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <?= Html::csrfMetaTags() ?>
        <title><?= Html::encode($this->title ?? Yii::$app->params['adminName']) ?></title>
        <?php $this->head() ?>
    </head>
    <body>
    <div name="main" id="app" v-cloak>
        <div class="main">
            <el-container>
                <?= $this->render('_aside') ?>
                <el-container>
                    <?= $this->render('_header') ?>
                    <div id="breadcrumb">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
                            <el-breadcrumb-item v-for=" item in breadcrumb">{{item}}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <el-main>
                        <?= $content ?>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
    </body>
    <?php $this->endBody() ?>
    <?php if (isset($this->blocks['js'])): ?>
        <?= $this->blocks['js'] ?>
    <?php endif; ?>
    <script>
        var $request = {
            request: function (url, method, data, callback) {
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    method: method,
                    url: url,
                    data: Qs.stringify(data)
                }).then((res) => {
                    callback(res)
                })
            },
            post: function (url, data, callback) {
                $request.request(url, 'post', data, callback)
            },
            get: function (url, data, callback) {
                axios.get(url, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        params: data
                    }
                ).then((res) => {
                    callback(res)
                })
            }
        };
        if ("undefined" == typeof App) App = {};
        var _App = {
            el: '#app',
            data: Object.assign({
                isCollapse: false,
                squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
                search_menu: '',
                aside_width: '230px',
                dialogFormVisible: false,
                multipleSelection: [],
                pageSizes: [10, 20, 30, 40, 50],
                pageSize:<?php echo $this->params['data']['pageSize'] ?? 20?>,
                tableData: <?php echo $this->params['data']['tableData'] ?? "[]"?>,
                currentPage:<?php echo $this->params['data']['currentPage'] ?? 1?>,
                count:<?php echo $this->params['data']['count'] ?? 0?>,
                breadcrumb: <?php echo $this->params['breadcrumb'] ?? []?>,
                centerDialogVisible: false, //添加弹窗
                search: ''

            }, App.data),
            methods: Object.assign({
                searchMenu:function(){
                    let keyword = this.search;
                    let dom = document.getElementsByClassName('el-menu-vertical-demo');
                    dom[0].childNodes.forEach((item)=>{
                        if(item.innerHTML.indexOf(keyword) == -1){
                            item.style.display = 'none';
                        }else{
                            item.style.display = 'block';
                        }

                    })
                },
                hideAside: function () {
                    this.isCollapse = true
                    this.aside_width = '60px'
                },
                showAside: function () {
                    this.isCollapse = false
                    this.aside_width = '230px'
                },
                logout: function () {
                    window.location.href = "/site/logout"
                },
                post: function (url, data, callback) {
                    $request.request(url, 'post', data, callback)
                },
                get: function (url, data, callback) {
                    $request.request(url, 'get', data, callback);
                },
                $success: function (msg) {
                    this.$message({
                        message: msg,
                        type: 'success'
                    });

                },
                $error: function (msg) {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                },
                searchInput() {
                    this.init();
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                //删除
                handleDelete: function (index, row) {
                    this.delete([row.id]);
                },
                //批量删除
                handleBatchDelete: function () {
                    if (this.multipleSelection.length == 0) {
                        return false;
                    }
                    let ids = [];
                    this.multipleSelection.forEach((item) => {
                        ids.push(item.id)
                    })
                    this.delete(ids);
                },
                delete: function (ids) {
                    let that = this;
                    let data = {ids: ids}
                    let url = "/<?=$controller?>/delete";
                    $request.post(url, data, function (res) {
                        if (res.status == 200 && res.data.code == '0') {
                            that.init();
                            that.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: 'error'
                            });
                        }
                    })
                },
                //编辑
                handleEdit: function (index, row) {
                    let that = this;
                    that.centerDialogVisible = true;
                    for (let item in that.form) {
                        that.form[item] = row[item]
                    }
                    if (typeof that.afterHandleEdit != 'undefined') {
                        that.afterHandleEdit(index, row);
                    }
                },
                //添加
                handleAdd: function () {
                    let that = this;
                    that.centerDialogVisible = true;
                    for (let item in that.form) {
                        that.form[item] = ''
                    }
                    if (typeof that.afterHandleAdd != 'undefined') {
                        that.afterHandleAdd();
                    }
                },
                //删除前二次确认
                handleDeleteConfirm: function (index, row) {
                    this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.handleDelete(index, row);
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                },
                //提交表单
                onSubmit() {
                    let that = this;
                    if (typeof this.beforeSaveValidate != 'undefined') {
                        that.beforeSaveValidate(that);
                    }
                    let data = that.form;
                    let url = "/<?=$controller?>/save";
                    $request.post(url, data, function (res) {
                        if (res.status && res.data.code == '0') {
                            that.centerDialogVisible = false;
                            that.$message({
                                type: 'success',
                                message: '操作成功'
                            });
                            that.init();
                        } else {
                            that.$message({
                                type: 'error',
                                message: res.data.message
                            });
                        }
                    })
                },
                //每页多少条
                handleSizeChange(val) {
                    this.pageSize = val;
                    this.init();
                },
                //下一页
                handleCurrentChange(val) {
                    this.currentPage = val;
                    this.init();
                },
                //初始化列表数据
                init() {
                    let that = this;
                    let url = "/<?=$controller?>/index";
                    let data = Object.assign({currentPage: this.currentPage, pageSize: this.pageSize}, that.searchData);
                    $request.get(url, data, function (res) {
                        if (res.status == 200 && res.data.code == '0') {
                            for (let item in res.data.data) {
                                that[item] = JSON.parse(res.data.data[item])
                            }
                        }
                    });
                }
            }, App.methods),
            mounted() {
                //this.init();
            },
        }
        delete App.data;
        delete App.methods;
        var vm = new Vue(Object.assign(_App, App))
    </script>
    </html>
<?php $this->endPage() ?>